<!-- The ref attr used to find the swiper instance -->
<template>
  <div class="icons-wrapper">
      <swiper ref="mySwiper" :options="swiperOption"><!--  -->
        <!-- slides   @someSwiperEvent="callback"-->
          <swiper-slide v-for="(page, idx) in pages" :key="idx">
            <div class="icon-box" v-for="item in page" :key="item.id">
              <div class="icon-img-box">
                <img
                  class="icon-img"
                  :src="item.imgUrl"
                />
              </div>
              <p class="icon-desc">{{item.description}}</p>
            </div>
          </swiper-slide>
        <!-- Optional controls -->
        <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      </swiper>
      <div @touchmove.prevent class="swiper-pagination2 paging" slot="pagination"></div>
  </div> 
</template>

<script>
export default {
  name: "HomeIcons",
  props: {
    iconsList: Array
  },
  data: function () {
    return {
      swiperOption: {//分页器
        pagination: '.swiper-pagination2',
        // loop: true, 轮播
        // autoplay: 5000, 换页时间
      },
      // iconsList: [{},{},{}]
    }
  },
  computed: {
    pages: function() {
       var pages = [];
       this.iconsList.forEach(function(item, idx){
         var page = Math.floor( idx / 8 );
         if(!pages[page]) {
           pages[page] = [];
         }
         pages[page].push(item);
       })

       return pages;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';

/**重定义分页器的样式-开始**/
.icons-wrapper >>> .swiper-pagination-bullet-active {
   margin: 0 10px;
} 

.icons-wrapper .paging {
  width: 100%;  
  text-align: center;
}
/**重定义分页器的样式-结束**/


.icons-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 55%;
  margin: .2rem 0;
  overflow :hidden;
}

.icons-wrapper .rolltag {
  width: 100%;
 
}

.icons-wrapper .rolltag span {
  padding: 0 5px !important;
}

.icons-wrapper .icon-box {
  position: relative;
  float: left;
  width: 25%;
  height: 0;
  padding-bottom: 25%;
}

.icons-wrapper .icon-box .icon-img-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.44rem;
}

.icons-wrapper .icon-box .icon-img-box img {
  display: block;
  height: 100%;
  margin: 0 auto;
}

.icons-wrapper .icon-box .icon-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.44rem;
  line-height: 0.44rem;
  text-align: center;
  color: $darkTxtColor;
  ellipsis();
}
</style>

